<template>
  <div class="multiple-select-wrap">
    <a-row type="flex">
      <a-col v-for="(item, index) in multipleList" :key="item.prop" :span="spanSplit">
        <a-select style="width:80%" v-bind="item" v-model="item.defaultValue" @change="(v) => handleChange(v, index)">
          <a-select-option v-for="opt in item.list" :value="opt.value" :key="opt.value">
            {{opt.label}}
          </a-select-option>
        </a-select>
        {{handlerRow(index)}}
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  props: {
    // 数据类型是object
    instance: Object
  },
  data() {
    return {
      multipleList: [],
      selectedValues: {}, // 已选的值
      spanSplit: 2
    }
  },
  watch: {
    instance: {
      handler(nVal) {
        Object.assign(this, { ...nVal })
        this.spanSplit = 24 / this.multipleList.length
        this.initSetting()
      },
      deep: true,
      immediate: true
    }
  },
  components: {

  },
  methods: {
    initSetting() {
      this.multipleList.forEach((item) => {
        const { prop } = item
        if (Object.hasOwnProperty.call(this.selectedValues, prop)) {
          if (item.defaultValue) {
            this.selectedValues[prop] = item.defaultValue
          }
        } else {
          const v = item.defaultValue || ''
          this.$set(this.selectedValues, prop, v)
        }
      })
      this.emitEvent() // 默认抛出去一次
      // console.log(this.selectedValues)
    },
    handlerRow(index) {
      return index + 1 < this.multipleList.length ? '-' : ''
    },
    handlerSelectedValue(v, key) {
      this.selectedValues[key] = v
    },
    handleChange(v, key) {
      this.handlerSelectedValue(v, key)
      this.emitEvent()
    },
    emitEvent() {
      const value = Object.values(this.selectedValues)
      // console.log(value)
      this.$emit('change', value)
    }
  }
}
</script>
